<template>
  <div>
    <nav-bar title="质量管理">
      <template v-slot:right>
        <span v-show="user && user.userType === '01'" @click="$router.push({name: 'MassReport'})">报告</span>
      </template>
    </nav-bar>
    <div class="maxinBox">
      <van-row>
        <van-col :span="10">
          <van-dropdown-menu>
            <van-dropdown-item v-model="form.measureType" :options="measureTypeList" @change="getMassList" />
          </van-dropdown-menu>
        </van-col>
        <van-col :span="14">
          <van-cell title="测量日期" v-model="form.measureTime" @click.native="onMeasureTime" />
        </van-col>
      </van-row>
      <van-popup v-model="showMeasureTime" position="bottom" style="height: 40%">
        <van-datetime-picker
          v-model="currentDate"
          @confirm="measureConfirm"
          @cancel="showMeasureTime = false"
          type="date"
          title="请选择测量日期"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>
      <form action="/">
        <van-search
          v-model="taskname"
          show-action
          placeholder="请输入任务名称"
          @search="getMassList"
        />
      </form>
      <div class="personalManage backgroundfff">
        <van-row class="personalData" v-for="(item, index) in massList" :key="index" @click="onMassDetails(item)">
          <van-col :span="20">
            <div>任务类型名称：{{item.taskName}}</div>
            <div>测量类型：{{item.typeName}}</div>
            <div>测量人：{{item.userName}}</div>
            <div>测量日期：{{item.measureDate}}</div>
          </van-col>
          <van-col :span="4" style="font-size: 1.5rem;line-height: 3.75rem;text-align: right;">
            <van-icon name="arrow" />
          </van-col>
        </van-row>
      </div>
      <div class="mass" @click="onMass" v-show="user && user.userType === '01'">
        发起
      </div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import massManageAPI from '../../../api/workAPI/massManageAPI.js'
  export default {
    data() {
      return {
        currentDate: new Date(),
        minDate: new Date(2015, 10, 1),
        maxDate: new Date(),
        showMeasureTime: false,
        taskname: '',
        user: {
          userStatus: '',
          userType: '',
        },
        form: {
          measureType: 0
        },
        measureTypeList: [],
        massList: []
      }
    },
    methods: {
      onMass() {
        this.$router.push({
          name: 'AddMass'
        })
      },
      // 查询测量列表
      getMassType() {
        massManageAPI.getMassType().then(res => {
          this.measureTypeList = res
          this.measureTypeList.unshift({
            text: '测量类型',
            value: 0
          })
        })
      },
      getMassList() {
        let taskType
        if (this.form.measureType === 0) {
          taskType = ''
        } else {
          taskType = this.form.measureType
        }
        let projectId = localStorage.getItem('projectId')
        let data = {
          measureDate: this.form.measureTime,
          taskName: this.taskname,
          taskType: taskType,
          pageSize: 1000,
          pageNum: 1
        }
        massManageAPI.getMassList(projectId, data).then(res => {
          this.massList = res.list
        })
      },
      onMeasureTime() {
        this.showMeasureTime = true
      },
      measureConfirm(val) {
       this.form.measureTime = moment(val).format('YYYY/MM/DD')
       this.showMeasureTime = false
       this.getMassList()
      },
      onMassDetails(data) {
        this.$router.push({
          name: 'MassDetails',
          params: {
            id: data.measureTaskId
          }
        })
      }
    },
    mounted() {
      this.user.userStatus = localStorage.getItem('userStatus')
      this.user.userType = localStorage.getItem('userType')
      this.getMassType()
      this.getMassList()
    }
  }
</script>

<style scoped lang="scss">
  .mass{
    position: fixed;
    right: 0;
    bottom: -2%;
    float: right;
    text-align: center;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    background-color: #1577FF;
    font-size: 0.875rem;
    color: #fff;
    margin: 1.25rem 1.25rem 1.25rem 0;
  }
  /deep/ .van-dropdown-menu__bar{
    box-shadow: inherit;
  }
  .van-col--14 .van-cell{
    line-height: 1.75rem;
  }
  .personalManage{
    .personalData{
      padding: 0.9375rem;
      border-bottom: 0.0625rem solid #E5E5E5;
      div{
        font-size: 0.875rem;
        padding: 0.125rem 0;
        color: #666;
      }
      div:nth-child(1) {
        font-size: 1rem;
        color: #333;
      }
    }
  }
  .tableData{
    font-size: 0.875rem;
    .tableContent:nth-child(2n){
      padding: 0.625rem 0.9375rem;
      color: #666;
    }
    .tableContent:nth-child(2n + 1){
      padding: 0.625rem 0.9375rem;
      color: #666;
      background-color: #F6FAFF;
    }
    .tableTitle{
      padding: 0.625rem 0.9375rem;
      background-color: #F6F6F6;
      height: 1.25rem;
      color: #999;
    }
  }
</style>
